<template>
    <div class="item">
        <input 
            type="checkbox" 
            id="checkbox" 
            @click="checkClick(todo)"
            :checked = "todo.done"
        >
        <p class="todo" v-show="!isshow">{{todo.title}}</p>
        
        <input 
            class="updateInput"
            type="text" 
            v-model="updataTodo"
            v-show="isshow"
            @blur="updateRequest(todo)"
            ref="input"
        >
        <p class="time">{{todo.createTime | time}}</p>
        
        <div class="btn">
            <button class="update" @click="updateClick(todo)">编辑</button>
            <button class="delete" @click="deleteClick(todo)">删除</button>
        </div>
        <!-- <Tips/> -->
    </div>
</template>

<script>
import Tips from './Tips.vue'
    
    export default {
  components: { Tips },
        name:"Home-Item",
        props:['todo'],
        data(){
            return {
                isshow:false,
                updataTodo:"",
                done:false
            }
        },
        filters:{
            time(val){
                return val.slice(5)
            }
        },
        methods: {
            // 设置文本框的展示隐藏
            updateClick(todo){
                this.updataTodo = todo.title
                this.isshow = !this.isshow
                this.$nextTick(function(){
                    this.$refs.input.focus()
                })
            },

            // 失去焦点隐藏并发送请求改变数据
            updateRequest(todo){
                this.isshow = !this.isshow
                const upinfo = {
                    _id : todo._id,
                    title : this.updataTodo,
                }
                this.$store.dispatch('Home/updateTodo',upinfo)
                // 更新数据
                setTimeout(()=>{
                    this.$store.dispatch('Home/getTodo')
                },40)
            },

            // 删除当前todo
            deleteClick(todo){
                this.$store.dispatch('Home/deleteTodo',todo)
                setTimeout(()=>{
                    this.$store.dispatch('Home/getTodo')
                    this.$store.dispatch('Home/getDoneLength')
                },40)
            },

            // 修改check
            checkClick(todo){
                this.done = !this.done
                this.$store.dispatch('Home/changDone',{_id:todo._id,done:this.done})
                setTimeout(()=>{
                    this.$store.dispatch('Home/getTodo')
                    this.$store.dispatch('Home/getDoneLength')
                },50)
            }
        },
    }
</script>

<style scoped lang="less">
    .item{
        display: flex;
        // padding:  0 20px;
        height: 3vw;   
        line-height: 3vw;
        justify-content: space-around;
        border-bottom: 1px solid #ccc;

        #checkbox{
            margin-right: 1.5vw;
        }

        .todo{
            width: 20vw;
            text-align: left;
            font-size: 1.2vw;
        }

        .updateInput{
            width: 20vw;
            text-align: left;
            outline: none;
        }

        .time{
            color: #ccc;
            font-size: 1vw;
        }

        button{
            height: 2vw;
            font-size: 0.8vw;
            color: #fff;
            padding: 0 0.5vw;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            // display: none;
        }

        .update{
            margin-right: 0.3vw;
            background: rgb(73, 221, 135);
           
                &:hover{
                    background:rgb(16, 124, 61) ;
                }
        }

        .delete{
            background: rgb(228, 72, 72);
            &:hover{
                    background:rgb(133, 9, 9) ;
                }
        }

    }
</style>